/*
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-02 12:10:46
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-02 16:47:57
 */
import { Button, List, DatePicker, NavBar } from 'antd-mobile'
import classNames from 'classnames'

// import { useEffect } from 'react'
import styles from './index.module.scss'
// import { useDispatch, useSelector } from 'react-redux'

import { getUserProfileAction } from '@/store/actions/profile'
// import { RootState } from '@/types/store'

/* 导入hooks */
import { useInitialState } from '@/hooks/useInitialState'

const Item = List.Item

const ProfileEdit = () => {
  // const dispatch = useDispatch()
  // const userProfile = useSelector((state: RootState) => state.profile.userProfile)
  // useEffect(() => {
  //   dispatch(getUserProfileAction())
  // }, [dispatch])
  const { userProfile } = useInitialState(getUserProfileAction, 'profile')
  return (
    <div className={styles.root}>
      <div className="content">
        {/* 标题 */}
        <NavBar
          style={{
            '--border-bottom': '1px solid #F0F0F0'
          }}
        >
          个人信息
        </NavBar>

        <div className="wrapper">
          {/* 列表 */}
          <List className="profile-list">
            {/* 列表项 */}
            <Item
              extra={
                <span className="avatar-wrapper">
                  <img width={24} height={24} src={userProfile.photo} alt="" />
                </span>
              }
              arrow
            >
              头像
            </Item>
            <Item arrow extra={userProfile.name}>
              昵称
            </Item>
            <Item
              arrow
              extra={
                <span
                  className={classNames('intro', userProfile.intro && 'normal')}
                >
                  {userProfile.intro || '未填写'}
                </span>
              }
            >
              简介
            </Item>
          </List>

          <List className="profile-list">
            <Item arrow extra={userProfile.gender === 0 ? '男' : '女'}>
              性别
            </Item>
            <Item arrow extra={userProfile.birthday}>
              生日
            </Item>
          </List>

          <div className="logout">
            <Button className="btn">退出登录</Button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default ProfileEdit